<style type="text/css">
    .reset-page main{
        background: #fff;
        background-size: 100% auto;
    }
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .logo{
        height: 2rem;
        margin: 1.2rem auto 0.3rem 0.8rem;
        text-align: center;
        color: red;
        font-size: 0.7rem;
        font-weight: bold;
        float: left;
    }
    .reset-form {
        padding-left: .6rem;
        padding-right: .6rem;
    }
    .reset-form .bui-list{
        border-top: none;
        margin-bottom: .7rem;
    }
    .reset-form > .bui-btn{
        margin-bottom: .3rem;
    }
    .reset-form .btn-input{
        border-radius: 0.35rem;
        background-color:#e8e8e8a1;
        margin-bottom: 0.1rem;
    }
    .reset-form .bui-btn-text{
        margin-bottom: .2rem;
    }
    
    .reset-form .bui-label{
        width: 0.5rem;
        margin-right: .2rem;
    }
    .reset-form .icon-face,
    .reset-form .icon-lock{
        font-size: 0.48rem;
    }
    .reset-form .bui-input {
        height: .6rem;
        background: none;
    }
    .reset-form .bui-btn-text{
        text-align: center;
        color: #666666;
        font-size: 0.2rem;
    }
    .copyright{
        font-size: 0.17rem;
        color: #999999;
        width: 100%;
        text-align: center;
        background-color: #ffffff;
        padding-bottom: 0.25rem;
    }
    
    .icon-eye:before {
        content: "\e680"
    }
    .icon-eye.active:before {
        content: "\e67f"
    }
    .btn-op {
        border-radius: 0.5rem;
        width: 4.7rem;
    }
    .list-item {
        height: 1.15rem;
        padding-left: 0.2rem;
        padding-right: 0.1rem;
    }
</style>
<div class="bui-page reset-page">
   
    <main class="reset-main">
        <div class="clearfix">
            <div class="logo bui-box-center">
                <span>密码重置</span>
            </div>
        </div>
        <div class="reset-form">
            <ul class="bui-list">
                <!-- 图标的图片 -->
                <li class="bui-box-align-middle clearactive btn-input list-item">
                    <label class="bui-label" for="phonenumber"><i class="icon-face"></i></label>
                    <div class="span1">
                        <div class="bui-input user-input">
                            <input id="phonenumber" type="number" placeholder="手机号码">
                        </div>
                    </div>
                </li>
                <li class="bui-box-align-middle clearactive btn-input list-item">
                    <label class="bui-label" for="password"><i class="icon-lock"></i></label>
                    <div class="span1">
                        <div id="pwdInput" class="bui-input password-input">
                            <input id="pwd" type="password" placeholder="密码(大于8位且包含大小写字母及数字)">
                        </div>
                    </div>
                </li>
                <li class="bui-box-align-middle clearactive btn-input list-item">
                    <label class="bui-label" for="confirmpwd"><i class="icon-lock"></i></label>
                    <div class="span1">
                        <div id="pwdConfirm" class="bui-input password-input">
                            <input id="confirmpwd" type="password" placeholder="确认密码">
                        </div>
                    </div>
                </li>
                <li class="bui-box-align-middle clearactive btn-input list-item">
                    <label class="bui-label" for="check"><i class="icon-chencknum" style="font-size: 0.42rem;">&#xe68c</i></label>
                    <div class="span1">
                        <div class="bui-input password-input">
                            <input id="check" type="text" placeholder="验证码">
                        </div>
                    </div>
                    <div id="btn-send" class="bui-btn danger-reverse mini" style="border-radius: 0.4rem;">发送验证码</div>
                </li>
                
                
            </ul>
            <div id="btn-reset" class="bui-btn danger btn-op">确定</div>
            <div class="bui-btn danger-reverse btn-op" onclick="bui.back();">取消</div>
        </div>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>